<!doctype html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0,viewport-fit=cover">
    <title>我的)</title>
    <link rel="stylesheet" type="text/css" href="../js/vant/index.css" />
    <link rel="stylesheet" type="text/css" href="../css/main.css" /> 
    <link rel="stylesheet" type="text/css" href="../css/me.css" /> 
    <!-- <style>
        .van-grid-item__content::after{
            z-index: -1 !important;
            border-width: 0 !important;
            border:0;
        }
        [class*=van-hairline]::after{
            border:0 !important;
        }
    </style> -->
</head>

<body>
    <div id="me_id">
        <header class="header-main">
            <van-nav-bar title="我的" ></van-nav-bar>
        </header>
        <template>
        <div class="detail-info main-body">
            <div class="user-info-header">
                <van-row>
                    <van-col span="7">
                        <div class="user-ava">
                            <img class="crown" src="../images/icon/crown.png"/>
                            <van-image width="20vw" height="20vw" round src="https://img.yzcdn.cn/vant/cat.jpeg" />
                        </div>
                    </van-col>
                    <van-col span="12">
                        <div class="user-content">
                            <div class="user-name">{{userName}}</div>
                            <div class="user-phone">{{showPhone()}}</div>
                            <div class="user-level horizontal">
                                <div class="vip">
                                    <img src="../images/icon/vip.png"/>
                                </div>
                                <div class="level-progress horizontal">
                                    <div class="left-vip active">{{leftVipText}}</div>
                                    <div class="progress">
                                        <div class="active" :style="{width:levelProgress+'%'}"></div> 
                                    </div>
                                    <div class="right-vip" :class="levelProgress==100 ? 'active':''">{{rightVipText}}</div>
                                </div>
                            </div>
                        </div>
                    </van-col>
                    <van-col span="5">
                        <div class="msg-area">
                            <div class="msg-item">
                                <span class="msg-title">消息</span>
                                <span class="msg-tab">1</span>
                            </div>
                        </div>
                    </van-col>
                  </van-row>
            </div>
            <div class="order-status-area">
                <div class="order-all">
                    <van-cell title="我的订单" is-link value="全部"></van-cell>
                </div>
                <div class="order-status">
                    <van-grid :border="false" :column-num="4">
                        <van-grid-item icon="../images/icon/guide.png" text="已完成"></van-grid-item>
                        <van-grid-item icon="../images/icon/my_order.png" text="待取货"></van-grid-item>
                        <van-grid-item icon="../images/icon/eva.png" text="售后"></van-grid-item>
                        <van-grid-item icon="../images/icon/collection.png" text="我的收藏"></van-grid-item>
                      </van-grid>
                </div>
            </div>
        </div>
        </template>
    </div>
</body>
<script type="text/javascript" src="../js/jquery/jquery320min.js"></script> 
<script type="text/javascript" src="../js/vant/vuemin.js"></script>
<script type="text/javascript" src="../js/vant/vantmin.js"></script>
<script type="text/javascript" src="../js/tools.js"></script>
<script type="text/javascript" src="../js/packajax.js"></script>
<script type="text/javascript">

    var meVm;
    $(function(){
        meVm = new Vue({
            el:'#me_id',
            data:{
                userName:'ysjdm',
                userPhone:'18986862371',
                leftVipText:'VIP1',
                levelProgress:60,
                rightVipText:'VIP2',
            },
            methods:{
                showPhone:function(){
                    return phoneMiddleHide(this.userPhone)
                }
            }
        });
    });

 </script>   
</html>